<template>
  <div id="breadcrumb" class="flex align-items-center">
    <svg-icon
      v-if="invisibleSidebar"
      icon-name="sprite_icons_unstaged"
      class-name="s24 pointer"
      @click.native="toggleSidebar"
    />
    <ws-breadcrumb :breadcrumb="breadcrumb" separator-class="el-icon-arrow-right" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import WsBreadcrumb from '@/components/shared/ws/ws-breadcrumb';

export default {
  name: 'breadcrumb', // 群组用页头面包屑
  components: { WsBreadcrumb },
  computed: {
    ...mapState({
      sidebarCollapsed: 'sidebarCollapsed',
      invisibleSidebar: 'invisibleSidebar',
      curGroup: 'currentGroup',
    }),
    breadcrumb() {
      const groupSpace = this.curGroup.space;
      const groupUrl = `/groups/${this.curGroup.id}`;
      const baseBreadcrumb = [
        { label: groupSpace.title, path: `/spaces/${groupSpace.id}` },
        { label: '群组', path: `/spaces/${groupSpace.id}/groups` },
        { label: this.curGroup.title, path: groupUrl },
      ];
      const current = this.$route.path.split('/')[3];
      switch (current) {
        case '': case undefined: case 'homepage': break;
        case 'members':
          baseBreadcrumb.push({ label: '成员', path: `${groupUrl}/members` });
          break;
        case 'activities':
          baseBreadcrumb.push({ label: '活跃', path: `${groupUrl}/activities` });
          break;
        case 'announcements':
          baseBreadcrumb.push({ label: '公告', path: `${groupUrl}/announcements` });
          break;
        case 'settings':
          baseBreadcrumb.push({ label: '设置', path: `${groupUrl}/settings` });
          break;
        default: break;
      }
      return baseBreadcrumb;
    },
  },
  methods: {
    ...mapActions({ setSidebarCollapsed: 'setSidebarCollapsed' }),
    // 小屏幕下的打开侧边栏
    toggleSidebar() { this.setSidebarCollapsed(!this.sidebarCollapsed); },
  },
};
</script>

<style></style>
